<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <style>
        #box{
            margin: 10px auto;
            width: 1200px;
            height: 600px;
            /*border: 1px solid red;*/
        }
        #left{
            width: 498px;
            height: 598px;
            /*border: 1px solid blue;*/
            float: left;
        }
        #right{
            width: 698px;
            height: 598px;
            /*border: 1px solid green;*/
            float: right;
        }
        .dp{
            width: 500px;
            height: 70px;
            font-size: 20px;
            margin: 10px 100px;
        }
        .pp{
            width: 400px;
            height: 60px;
            border: 0px;
        }
        .ds{
            display: inline-block;
            width: 100px;
            height: 60px;
        }
        .sl{
            width: 60px;
            height: 20px;
        }
        .bt1{
            width: 180px;
            height: 40px;
            background-color: #FFF2E8;
        }
        .bt2{
            width: 260px;
            height: 40px;
            background-color: #FF4400;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="left">
            <div class="layui-carousel" id="test10">
                <div carousel-item="">
                    <c:forEach items="${sessionScope.bookurl}" var="obj" >
                        <div><img width="498px" height="598" src="${obj.get("url")}"></div>
                    </c:forEach>
                </div>
            </div>
        </div>
        <div id="right">
            <%--<form>--%>
                <input type="hidden" class="pp" readonly id="bookid" name="bookid" value="${sessionScope.book.get(0).get("bookid")}">
                <div class="dp"><span class="ds">书名：</span><input type="text" class="pp" id="bookname"  readonly name="bookname" value="${sessionScope.book.get(0).get("bookname")}"></div>
                <div class="dp"><span class="ds">作者：</span><input type="text" class="pp" readonly id="author" name="author" value="${sessionScope.book.get(0).get("author")}"><br></div>
                <div class="dp"><span class="ds">出版社：</span><input type="text" class="pp" readonly id="publisher" name="publisher" value="${sessionScope.book.get(0).get("publisher")}"></div>
                <div class="dp"><span class="ds">书籍介绍：</span><input type="text" class="pp" readonly id="remark" name="remark" value="${sessionScope.book.get(0).get("remark")}"></div>
                <div class="dp"><span class="ds">价格：</span><input type="text" style="font-size: 22px;color: #FF6700;" class="pp" readonly id="outprice" name="outprice" value="￥${sessionScope.book.get(0).get("price")}"></div>
                <div class="dp"><span class="ds">数量：</span><input type="number" step="1" min="0" max="${sessionScope.book.get(0).get("count")}" class="sl" id="count" name="count" value="0"><input style="border: 0px;padding-left: 20px;font-size: 16px" type="text" readonly placeholder="库存：${sessionScope.book.get(0).get("count")}"></div>
                <div class="dp">
                    <button id="ljgm" class="bt1">立即购买</button>
                    <button class="bt2" id="jrgwc"><i class="layui-icon">&#xe657;</i>加入购物车</button>
                </div>
            <%--</form>--%>
        </div>
    </div>

    <script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use(['carousel','form','jquery'], function(){
            var carousel = layui.carousel
            var form = layui.form;
            var $ = layui.jquery;
            //图片轮播
            carousel.render({
                elem: '#test10'
                ,width: '498px'
                ,height: '598px'
                ,interval: 2000
                ,anim:'fade'
            });

            $("#ljgm").click(function () {
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath}/dingdan/insertDingDan',
                    data:{"bookid":$("#bookid").val(),"count":$("#count").val(),"outprice":$("#outprice").val()},
                    dataType:'json',//预期的后台数据类型
                    success:function (data) {
                        if (data.code == "1001"){
                            layer.alert(data.msg, {icon: 1});
                            setTimeout("window.location.href = '${pageContext.request.contextPath}/myself.jsp'",1500);
                        }else if (data.code == "1001"){
                            layer.alert(data.msg, {icon: 5});
                        }else {
                            window.location.href = "${pageContext.request.contextPath}/khdlogin.jsp";
                            //alert("111");
                        }
                    }
                })
            })

            $("#jrgwc").click(function () {
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath}/gwc/insertGwc',
                    data:{"bookid":$("#bookid").val(),"count":$("#count").val(),"outprice":$("#outprice").val()},
                    dataType:'json',//预期的后台数据类型
                    success:function (data) {
                        if (data.code == "1001"){
                            layer.alert(data.msg, {icon: 1});
                        }else if (data.code == "1001"){
                            layer.alert(data.msg, {icon: 5});
                        }else {
                            window.location.href = "${pageContext.request.contextPath}/khdlogin.jsp";
                            //alert("111");
                        }
                    }
                })
            })

        });
    </script>
</body>
</html>
